
class Magnifier {
		constructor(smallBox, bigBox, mask) {
			this.smallBox = smallBox;
			this.bigBox = bigBox;
			this.mask = mask;
			this.eventBind();
		}

		mouseover() {
			//箭头函数的this就是他爹的this
			// this.smallBox.onmouseover = ()=>{
			// 	this.bigBox.style.display = "block";
			// 	this.mask.style.display = "block";
			// }

			let that = this;
			this.smallBox.onmouseover = function() {
				that.bigBox.style.display = "block";
				that.mask.style.display = "block";
			}
		}

		mouseout() {
			let that = this;
			this.smallBox.onmouseout = function() {
				that.bigBox.style.display = "none";
				that.mask.style.display = "none";
			}
		}

		mousemove() {
			let that = this;
			this.smallBox.onmousemove = function(evt) {
				let e = evt || event;

				let left = e.pageX - that.mask.offsetWidth / 2 - this.offsetLeft;
				let top = e.pageY - that.mask.offsetHeight / 2 - this.offsetTop;

				if (left < 0) {
					left = 0;
				}

				if (top < 0) {
					top = 0;
				}

				let maxLeft = this.offsetWidth - that.mask.offsetWidth;

				if (left > maxLeft) {
					left = maxLeft;
				}

				let maxTop = this.offsetHeight - that.mask.offsetHeight;

				if (top > maxTop) {
					top = maxTop;
				}

				//小图片的宽    left
				//---------=---------
				//大图片的宽     x

				let x = that.bigBox.offsetWidth * left / that.mask.offsetWidth;
				let y = that.bigBox.offsetHeight * top / that.mask.offsetHeight;

				that.mask.style.left = left + "px";
				that.mask.style.top = top + "px";

				that.bigBox.style.backgroundPositionX = -x + "px";
				that.bigBox.style.backgroundPositionY = -y + "px";
			}
		}
			
			mouseoverLi(){
				let that = this;
				let oLis = document.querySelectorAll("li");
				for(let i=0;i<oLis.length;i++){
					oLis[i].onmouseover = function(){
						for(let j=0;j<oLis.length;j++){
							if(i == j){
							oLis[j].style.border = "1px solid red";
							that.smallBox.style.backgroundImage = `url(imgs/${i}.jpg.png)`;
							that.bigBox.style.backgroundImage = `url(imgs/${i}.jpg.png)`;
							}else{
								oLis[j].style.border = "";
							}
						}
					}
				}
			}
			
		eventBind() {
			this.mouseover();
			this.mouseout();
			this.mousemove();
			this.mouseoverLi();
		}
	}
